<%@ page language="java" import="java.util.*,com.beans.*,com.dao.CateDao" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>goods_manage</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	
	<link rel="stylesheet" type="text/css" href="css/maintable.css" ></link>
	<script type="text/javascript" src="js/jquery-1.8.0.js"></script> 
	
	<style>
        .div_tools{
            width:99.5%;
            height:28px;
            background:#D3EAEF;
            margin:0px auto;
            margin-top:5px;
            margin-bottom:5px;
            padding-left:20px;
            font-size:12px;
            position:relative;
        }

        .div_tools select{
            height:20px;
            font-size:12px;
            margin-top:3px;
        }

        /*显示图片*/
        #div_picture{
            display:none;
            position: absolute;
        }
    </style>
	
	<script type="text/javascript">
		$(function(){
			$("#ch_checkall,#top_ch_checkall").click(function(){
				if(this.checked){
					$("input[name=ck_id]").attr("checked","checked");
				}else{
					$("input[name=ck_id]").removeAttr("checked");
				}		
			});
					
			$("table tr").mouseover(function(){
				$(this).css("background","#D3EAEF");
				$(this).siblings().css("background","white");
			});
			
			//级联查询
			$("#bigCateId").change(function () {
				if (this.value == "-1") {
				    $("#smallCateId").html("<option value='-1'>所属小分类</option>");
				    return;
				}
				$.ajax({
				    url: "GoodsServlet.do",
				    type: "POST",
				    async: false,
				    dataType: "json",
				    data: {bigCateId: this.value, flag: "smallCateList"},
				    success: function (cateList) {
				        $.each(cateList, function (key, cate) {
				            var str = "<option value='" + cate.id + "'>" + cate.cateName + "</option>";
				            $("#smallCateId").append(str);
				        });
				    }
				});
			});
		  	 //回显分类选择
			 $("#bigCateId").val("${param.bigCateId}");
             $("#bigCateId").change();
             $("#smallCateId").val("${param.smallCateId}");
             
		});
		
		//分页的“转到”功能
		function subForm(pageIndex){
			document.form1.action="GoodsServlet.do?flag=manage&pageIndex="+pageIndex;
			document.form1.submit();
		}
		
		function getElemPos(obj) {
            var pos = {
                "top" : 0,
                "left" : 0
            };
            if (obj.offsetParent) {
                while (obj.offsetParent) {
                    pos.top += obj.offsetTop;
                    pos.left += obj.offsetLeft;
                    obj = obj.offsetParent;
                }
            } else if (obj.x) {
                pos.left += obj.x;
            } else if (obj.x) {
                pos.top += obj.y;
            }

            return {
                x : pos.left,
                y : pos.top
            };

        }
		
		//查看商品图片
		function show(item, goodsId, desc) {
            var position = getElemPos(item);
            $("#div_picture").show();
            $("#div_picture").css("left", position.x- 150).css("top",position.y);

            $("#goods_picture").attr("src","GoodsServlet.do?flag=showPicture&goodsId="+goodsId);
            $("#div_imgdesc").html("<center>" + desc + "</center>");
        }

        //隐藏商品图片
        function hide() {
            $("#div_picture").hide();
        }

	</script>

  </head>
  <body>
	  <div class ="div_title">
		<div class="div_titlename"> <img src="images/san_jiao.gif" ><span>管理人员基本信息列表</span></div>
		<div class="div_titleoper">
			<input type="checkbox" id="top_ch_checkall"/> 全选 <a href="goods/goods_add.jsp"> <img src="images/add.gif"/>添加 </a> <a href="javascript:void(0)"><img src="images/del.gif"/>删除</a> 
		</div>
	 </div>
	 
	 <form action="GoodsServlet.do"  name="form1" method="post">
	 	<input type="hidden" name="flag" value="manage">
	 	<div class="div_tools">
	        <%
	            List<CateInfo> cateList = new CateDao().getCateList(0);
	            request.setAttribute("cateList", cateList);
	        %>
	        <select name="bigCateId" id="bigCateId">
	            <option value="-1">所属大分类</option>
	            <c:forEach var="cate" items="${cateList}">
	                <option value="${cate.id }">${cate.cateName }</option>
	            </c:forEach>
	        </select>
	        &nbsp;
	        <select name="smallCateId" id="smallCateId">
	            <option value="-1">所属小分类</option>
	        </select>
	        &nbsp; &nbsp; &nbsp;商品名称: <input type="text" name="goodsName" value="${param.goodsName }"/>
	        <input type="submit" value="查询"/>
   		 </div>
		 <table class="main_table">
		     <tr>
 				<th><input type="checkbox" id="ch_checkall" /></th>
 			    <th>名称</th> 	
 			    <th>单位</th>	
 			    <th>单价</th>  
 			    <th>大分类</th> 	
 			    <th>小分类</th> 	
 			    <th>操作</th>
	 		</tr>
	 		
	 		<c:forEach var="goods" items="${goodsList }">
	 			<tr>
	 				<td>
	 					<input type="checkbox" name="ck_id" value="${goods.id }" /> 
	 				</td>
	 				<td>${goods.goodsName }</td>	
	 				<td>${goods.unit }</td>	
	 				<td>${goods.price }</td>	
	 				<td>${goods.bigCateName }</td>	
	 				<td>${goods.smallCateName }</td>	
	 				<td>
	 					<a href="javascript:void(0)" onmouseover="show(this,'${goods.id }','${goods.des }')"
                       		onmouseout="hide()">查看</a> 
		 				<a href="${pageContext.request.contextPath }/GoodsServlet.do?flag=searchforupdate&id=${goods.id}">修改</a> |  
		 			    <a href="javascript:del(${goods.id })">删除</a> 
	 				</td>
	 			</tr>
	 		</c:forEach>
		</table>
		<div id="div_picture">
       		<img id="goods_picture" width="140" height="190" />
        <div id="div_imgdesc"></div>
    </div>
	</form>
	<div class="div_page" >
		  <div class="div_page_left">    共有 
		  	<label>${page.rowCount }</label> 条记录，当前第 <label>${page.pageIndex }</label> 页，共 <label>${page.pageCount }</label> 页	</div>		
		  <div class="div_page_right" > 	 
		  	<c:choose>
		  		<c:when test="${page.hasPre }">
		  			<a href="GoodsServlet.do?flag=manage&pageIndex=1">首页</a>
		  			<a href="GoodsServlet.do?flag=manage&pageIndex=${page.pageIndex-1 }">上一页</a>  &nbsp;  &nbsp;  &nbsp;  &nbsp;
		  		</c:when>
		  		<c:otherwise>
		  			 首页
	  	 			 上一页
		  		</c:otherwise>
		  	</c:choose>
		  	
		  	<c:choose>
		  		<c:when test="${page.hasNext }">
		  			<a href="GoodsServlet.do?flag=manage&pageIndex=${page.pageIndex+1 }">下一页</a>
		  			<a href="GoodsServlet.do?flag=manage&pageIndex=${page.pageCount }">尾页</a>  &nbsp;  &nbsp;  &nbsp;  &nbsp;
		  		</c:when>
		  		<c:otherwise>
		  			 下一页 
	  	 		   	尾页
		  		</c:otherwise>
		  	</c:choose>

	  	  <button onclick="javascript:subForm(${param.pageIndex})">转到</button>
	  	 <input type="text" name="pageIndex" id="pageIndex" value="${page.pageIndex }" /> 页
	  </div>	
	</div>
  </body>
</html>

